<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="apple-touch-icon" sizes="76x76" href="/static/image/logo.png">
    <link rel="icon" type="image/png" href="/static/image/logo.png">
    <title>
        EditorBywang
    </title>
    <!--     Fonts and icons     -->
    <link rel="stylesheet" type="text/css"
        href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
    <!-- Nucleo Icons -->
    <link href="/static/assets/css/nucleo-icons.css" rel="stylesheet" />
    <link href="/static/assets/css/nucleo-svg.css" rel="stylesheet" />
    <!-- Font Awesome Icons -->
    <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
    <!-- Material Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
    <!-- CSS Files -->
    <link id="pagestyle" href="/static/assets/css/material-dashboard.css?v=3.0.0" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="/static/assets/css/ele-index.css">
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body class="g-sidenav-show bg-gray-200">
    {% verbatim myblock %}
    <div id="app" v-cloak v-loading="loading">
        <aside
            class="sidenav navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-3 fixed-start ms-3   bg-gradient-dark"
            id="sidenav-main">
            <div class="sidenav-header">
                <i class="fas fa-times p-3 cursor-pointer text-white opacity-5 position-absolute end-0 top-0 d-none d-xl-none"
                    aria-hidden="true" id="iconSidenav"></i>
                <a class="navbar-brand m-0" href="#" v-if="nick_name === '_'">
                    <img src="/static/image/logo.png" class="navbar-brand-img h-100" alt="main_logo">
                    <span class="ms-1 font-weight-bold text-white">Black White Site</span>
                </a>
                <a class="navbar-brand m-0" href="/pages/personalPage.html" v-if="nick_name !== '_'">
                    <img :src="user_avatar" class="navbar-brand-img h-100" alt="main_logo">
                    <span class="ms-1 font-weight-bold text-white">您好 {{ nick_name}}</span>
                </a>
            </div>
            <hr class="horizontal light mt-0 mb-2">
            <div class="collapse navbar-collapse  w-auto  max-height-vh-100" id="sidenav-collapse-main">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link text-white bg-gradient-primary" href="#" onclick="toggleSidenav()"
                            style="background: black !important;">
                            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                                <i class="material-icons opacity-10">close</i>
                            </div>
                            <span class="nav-link-text ms-1">关闭侧边栏</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white" href="/pages/homePage.html">
                            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                                <i class="material-icons opacity-10">home</i>
                            </div>
                            <span class="nav-link-text ms-1">社区·圈子</span>
                        </a>
                    </li>
                    <li class="nav-item mt-3">
                        <h6 class="ps-4 ms-2 text-uppercase text-xs text-white font-weight-bolder opacity-8">My Space
                        </h6>
                    </li>
                    <li class="nav-item" v-if="nick_name !== '_'">
                        <a class="nav-link text-white " href="/pages/personalPage.html">
                            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                                <i class="material-icons opacity-10">person</i>
                            </div>
                            <span class="nav-link-text ms-1">我的主页</span>
                        </a>
                    </li>
                    <li class="nav-item" v-if="nick_name !== '_'">
                        <a class="nav-link text-white active bg-gradient-primary" href="#" onclick="toggleSidenav()">
                            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                                <i class="fa fa-bandcamp" aria-hidden="true"></i>
                            </div>
                            <span class="nav-link-text ms-1">新建文章</span>
                        </a>
                    </li>
                    <li class="nav-item" id="login_aside" v-if="nick_name === '_'">
                        <a class="nav-link text-white " href="/pages/sign-in.html">
                            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                                <i class="material-icons opacity-10">login</i>
                            </div>
                            <span class="nav-link-text ms-1">登录</span>
                        </a>
                    </li>
                    <li class="nav-item" id="register_aside" v-if="nick_name === '_'">
                        <a class="nav-link text-white " href="/pages/sign-up.html">
                            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                                <i class="material-icons opacity-10">assignment</i>
                            </div>
                            <span class="nav-link-text ms-1">注册</span>
                        </a>
                    </li>
                    <li class="nav-item" id="logout_aside" v-if="nick_name !== '_'">
                        <a class="nav-link text-white " href="#" @click="logout">
                            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                                <!-- <i class="material-icons opacity-10">assignment</i> -->
                                <i class="ni ni-user-run"></i>
                            </div>
                            <span class="nav-link-text ms-1">退出登录</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="sidenav-footer position-absolute w-100 bottom-0 ">
                <div class="mx-3">
                </div>
            </div>
        </aside>
        <div class="main-content position-relative bg-gray-100 max-height-vh-100 h-100">
            <!-- Navbar -->
            <nav class="navbar navbar-main navbar-expand-lg px-0 mx-4 shadow-none border-radius-xl" id="navbarBlur"
                navbar-scroll="true">
                <div class="container-fluid py-1 px-3">
                    <!-- 头部左侧 -->
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
                            <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark"
                                    href="javascript:;">Pages</a></li>
                            <li class="breadcrumb-item text-sm text-dark active" aria-current="page">新增文章</li>
                        </ol>
                        <h6 class="font-weight-bolder mb-0">N E W !</h6>
                    </nav>
                    <!-- 头部右侧 -->
                    <div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
                        <div class="ms-md-auto pe-md-3 d-flex align-items-center">
                            <div class="input-group input-group-outline">
                                <label class="form-label">Type here search</label>
                                <input type="text" class="form-control" disabled>
                            </div>
                        </div>
                        <ul class="navbar-nav  justify-content-end" id="right_ul">
                            <li class="nav-item d-flex align-items-center">
                                <a href="/pages/sign-in.html" class="nav-link text-body font-weight-bold px-0"
                                    v-if="nick_name === '_'">
                                    <i class="fa fa-user me-sm-1"></i>
                                    <span class="d-sm-inline d-none">登录/注册</span>
                                </a>
                            </li>
                            <!-- 侧边栏显示与否 -->
                            <li class="nav-item d-xl-none ps-3 d-flex align-items-center">
                                <a href="javascript:;" class="nav-link text-body p-0" id="iconNavbarSidenav">
                                    <div class="sidenav-toggler-inner">
                                        <i class="sidenav-toggler-line"></i>
                                        <i class="sidenav-toggler-line"></i>
                                        <i class="sidenav-toggler-line"></i>
                                    </div>
                                </a>
                            </li>
                            <li class="nav-item px-3 d-flex align-items-center">
                                <a href="javascript:;" class="nav-link text-body p-0">
                                    <!-- 展示关键 fixed-plugin-button-nav -->
                                    <i class="fa fa-cog fixed-plugin-button-nav cursor-pointer"></i>
                                </a>
                            </li>
                            <li class="nav-item dropdown pe-2 d-flex align-items-center">
                                <a href="javascript:;" class="nav-link text-body p-0" id="dropdownMenuButton"
                                    data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fa fa-bell cursor-pointer"></i>
                                </a>
                                <ul class="dropdown-menu  dropdown-menu-end  px-2 py-3 me-sm-n4"
                                    aria-labelledby="dropdownMenuButton">
                                    <li class="mb-2">
                                        <a class="dropdown-item border-radius-md" href="javascript:;">
                                            <div class="d-flex py-1">
                                                <div class="my-auto">
                                                    <img src="/static/assets/img/team-2.jpg"
                                                        class="avatar avatar-sm  me-3 ">
                                                </div>
                                                <div class="d-flex flex-column justify-content-center">
                                                    <h6 class="text-sm font-weight-normal mb-1">
                                                        <span class="font-weight-bold">New message</span> from Laur
                                                    </h6>
                                                    <p class="text-xs text-secondary mb-0">
                                                        <i class="fa fa-clock me-1"></i>
                                                        13 minutes ago
                                                    </p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="mb-2">
                                        <a class="dropdown-item border-radius-md" href="javascript:;">
                                            <div class="d-flex py-1">
                                                <div class="my-auto">
                                                    <img src="/static/assets/img/small-logos/logo-spotify.svg"
                                                        class="avatar avatar-sm bg-gradient-dark  me-3 ">
                                                </div>
                                                <div class="d-flex flex-column justify-content-center">
                                                    <h6 class="text-sm font-weight-normal mb-1">
                                                        <span class="font-weight-bold">New album</span> by Travis Scott
                                                    </h6>
                                                    <p class="text-xs text-secondary mb-0">
                                                        <i class="fa fa-clock me-1"></i>
                                                        1 day
                                                    </p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <!-- End Navbar -->
            <div class="container-fluid px-2 px-md-4">
                <div class="page-header min-height-300 border-radius-xl mt-4"
                    style="background-image: url('/static/image/header.gif');">
                    <span class="mask  opacity-6"></span>
                </div>

                <div class="card card-body mx-3 mx-md-4 mt-n6">
                    <div class="row gx-4 mb-2">
                        <div class="col-auto">
                            <div class="avatar avatar-xl position-relative">
                                <img :src="headAvatar" alt="profile_image" class="w-100 border-radius-lg shadow-sm">
                            </div>
                        </div>
                        <div class="col-auto my-auto col-md-6">
                            <div class="ms-md-auto pe-md-3 d-flex align-items-center">
                                <div class="input-group input-group-outline">
                                    <label class="form-label">文章标题 最长100字符</label>
                                    <input type="text" class="form-control" maxlength="100" v-model="article_title">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6 my-sm-auto ms-sm-auto me-sm-0 mx-auto mt-3">
                            <div class="nav-wrapper position-relative end-0">
                                <ul class="nav nav-pills nav-fill p-1" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link mb-0 px-0 py-1 active " data-bs-toggle="tab"
                                            href="javascript:;" role="tab" aria-selected="true" @click="update_content">
                                            <i class="material-icons text-lg position-relative">save</i>
                                            <span class="ms-1">上传文章</span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link mb-0 px-0 py-1 " data-bs-toggle="tab" href="javascript:;"
                                            role="tab" aria-selected="false">
                                            <i class="material-icons text-lg position-relative">clear</i>
                                            <span class="ms-1">清空文章</span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link mb-0 px-0 py-1 " data-bs-toggle="tab" href="javascript:;"
                                            @click="changeEditor" role="tab" aria-selected="false">
                                            <i class="material-icons text-lg position-relative">books</i>
                                            <span class="ms-1">切换编辑器</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div id="new_editor">
                        <div id="toolbar-container" class="toolbar"></div>
                        <div id="text-container" class="text" style="height: 500px !important; border: dotted 1px;">
                        </div>
                    </div>
                    <el-divider content-position="left">封面设置（非必须）</el-divider>
                    <div class="my-auto" style="text-align: center;">
                        <el-upload class="upload-demo" ref="upload" :limit="1" accept=".png, .jpg, .jpeg, .gif"
                            :headers="avatar_header" :action="action" :on-change="loadJsonFromFile"
                            :on-preview="handlePreview" :on-remove="handleRemove" :on-error="avatarFail"
                            :on-exceed="handleExceed" :on-success="avatarSuccess" :file-list="fileList"
                            :auto-upload="false">
                            <el-button slot="trigger" size="small" type="primary">选取文章封面</el-button>
                            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">
                                上传到服务器
                            </el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png等图片文件，且不超过5M （上传成功后会显示在标题左侧哦~）</div>
                        </el-upload>
                    </div>
                    <el-divider content-position="left">其他设置（必须）</el-divider>
                    <div>
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-form-item label="是否公开">
                                <el-switch v-model="form.delivery"></el-switch>
                            </el-form-item>
                            <el-divider content-position="left">至少一个 至多五个</el-divider>
                            <el-form-item label="文章标签">
                                <el-checkbox-group v-model="form.type" :min="1" :max="5">
                                    <el-checkbox-button v-for="tag in tagOptions" :label="tag" :key="tag" size="small">
                                        {{tag}}
                                    </el-checkbox-button>
                                </el-checkbox-group>
                                <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue"
                                    ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm"
                                    @blur="handleInputConfirm">
                                </el-input>
                                <el-button v-else class="button-new-tag" size="small" @click="showInput">增加标签
                                    （tips:输入后点击其他区域即可生成）
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
            <footer class="footer py-4  ">
                <div class="container-fluid">
                    <div class="row align-items-center justify-content-lg-between">
                        <div class="col-lg-6 mb-lg-0 mb-4">
                            <div class="copyright text-center text-sm text-muted text-lg-start">
                                ©
                                <script>
                                    document.write(new Date().getFullYear())
                                </script>,
                                made with <i class="fa fa-heart"></i> by
                                <a href="https://www.creative-tim.com" class="font-weight-bold" target="_blank">Creative
                                    Tim</a>
                                for a better web.
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <ul class="nav nav-footer justify-content-center justify-content-lg-end">
                                <li class="nav-item">
                                    <a href="https://www.creative-tim.com" class="nav-link text-muted"
                                        target="_blank">Creative Tim</a>
                                </li>
                                <li class="nav-item">
                                    <a href="https://www.creative-tim.com/presentation" class="nav-link text-muted"
                                        target="_blank">About Us</a>
                                </li>
                                <li class="nav-item">
                                    <a href="https://www.creative-tim.com/blog" class="nav-link text-muted"
                                        target="_blank">Blog</a>
                                </li>
                                <li class="nav-item">
                                    <a href="https://www.creative-tim.com/license" class="nav-link pe-0 text-muted"
                                        target="_blank">License</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
        <div class="fixed-plugin">
            <a class="fixed-plugin-button text-dark position-fixed px-3 py-2">
                <i class="material-icons py-2">settings</i>
            </a>
            <div class="card shadow-lg">
                <div class="card-header pb-0 pt-3">
                    <div class="float-start">
                        <h5 class="mt-3 mb-0">嗨喽~</h5>
                        <p>配置你想要的主题.</p>
                    </div>
                    <div class="float-end mt-4">
                        <button class="btn btn-link text-dark p-0 fixed-plugin-close-button">
                            <i class="material-icons">clear</i>
                        </button>
                    </div>
                    <!-- End Toggle Button -->
                </div>
                <hr class="horizontal dark my-1">
                <div class="card-body pt-sm-3 pt-0">
                    <!-- Sidebar Backgrounds -->
                    <div>
                        <h6 class="mb-0">侧边栏聚焦</h6>
                    </div>
                    <a href="javascript:void(0)" class="switch-trigger background-color">
                        <div class="badge-colors my-2 text-start">
                            <span class="badge filter bg-gradient-primary active" data-color="primary"
                                onclick="sidebarColor(this)"></span>
                            <span class="badge filter bg-gradient-dark" data-color="dark"
                                onclick="sidebarColor(this)"></span>
                            <span class="badge filter bg-gradient-info" data-color="info"
                                onclick="sidebarColor(this)"></span>
                            <span class="badge filter bg-gradient-success" data-color="success"
                                onclick="sidebarColor(this)"></span>
                            <span class="badge filter bg-gradient-warning" data-color="warning"
                                onclick="sidebarColor(this)"></span>
                            <span class="badge filter bg-gradient-danger" data-color="danger"
                                onclick="sidebarColor(this)"></span>
                        </div>
                    </a>
                    <!-- Sidenav Type -->
                    <div class="mt-3">
                        <h6 class="mb-0">侧边栏样式</h6>
                        <p class="text-sm">选择想要的侧边栏样式</p>
                    </div>
                    <div class="d-flex">
                        <button class="btn bg-gradient-dark px-3 mb-2 active" data-class="bg-gradient-dark"
                            onclick="sidebarType(this)">暗黑</button>
                        <button class="btn bg-gradient-dark px-3 mb-2 ms-2" data-class="bg-transparent"
                            onclick="sidebarType(this)">透明</button>
                        <button class="btn bg-gradient-dark px-3 mb-2 ms-2" data-class="bg-white"
                            onclick="sidebarType(this)">白亮</button>
                    </div>
                    <p class="text-sm d-xl-none d-block mt-2">You can change the sidenav type just on desktop view.</p>
                    <!-- Navbar Fixed -->
                    <div class="mt-3 d-flex">
                        <h6 class="mb-0">导航栏固定</h6>
                        <div class="form-check form-switch ps-0 ms-auto my-auto">
                            <input class="form-check-input mt-1 ms-auto" type="checkbox" id="navbarFixed"
                                onclick="navbarFixed(this)">
                        </div>
                    </div>
                    <hr class="horizontal dark my-3">
                    <div class="mt-2 d-flex">
                        <h6 class="mb-0">全局主题[白/黑]</h6>
                        <div class="form-check form-switch ps-0 ms-auto my-auto">
                            <input class="form-check-input mt-1 ms-auto" type="checkbox" id="dark-version"
                                onclick="darkMode(this)">
                        </div>
                    </div>
                    <hr class="horizontal dark my-sm-4">
                    <a class="btn btn-outline-dark w-100" href="">completed welcome blackwhitesite</a>
                </div>
            </div>
        </div>
    </div>
    {% endverbatim myblock %}
    <!--   Core JS Files   -->
    <script src="/static/assets/js/core/popper.min.js"></script>
    <script src="/static/assets/js/core/bootstrap.min.js"></script>
    <script src="/static/assets/js/plugins/perfect-scrollbar.min.js"></script>
    <script src="/static/assets/js/plugins/smooth-scrollbar.min.js"></script>

    <script src="/static/assets/js/my/jquery.js"></script>
    <script src="/static/assets/js/my/vue.min.js"></script>
    <script src="/static/assets/js/my/vue-router.js"></script>
    <script src="/static/assets/js/my/ele.index.js"></script>
    <script src="/static/assets/js/my/wangEditor.js"></script>
    <link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
    <script src="/static/js/ping.js"></script>
    <script src="/static/js/clickEmoji.js"></script>
    <script src="/static/js/cookieUtil.js"></script>


    <script>
        var win = navigator.platform.indexOf('Win') > -1;
        if (win && document.querySelector('#sidenav-scrollbar')) {
            var options = {
                damping: '0.5'
            }
            Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
        }
    </script>
    <!-- Github buttons -->
    <!-- <script async defer src="https://buttons.github.io/buttons.js"></script>
  Control Center for Material Dashboard: parallax effects, scripts for the example pages etc
  <script src="/static/assets/js/material-dashboard.min.js?v=3.0.0"></script> -->

    <script>
        new Vue({
            el: '#app',
            data: {
                inputVisible: false,
                inputValue: "",
                click_article: "最新",
                tagOptions: ['原创', '转载', '分享', 'Python', '爬虫', 'JS'],
                loading: true,
                old_content: "",
                title: "",
                nick_name: localStorage.getItem("nick_name") === null ? '_' : localStorage.getItem("nick_name"),
                user_avatar: localStorage.getItem("avatar") === null ? '_' : localStorage.getItem("avatar"),
                loading: true,
                article_title: "",
                action: "/apiArticle/uploadAvatar/",
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                avatar_header: {
                    "token": document.cookie.match(/.*jwtToken=([^;.]*).*$/) === null ? null : document.cookie.match(/.*jwtToken=([^;.]*).*$/)[1],
                    'X-CSRFToken': document.cookie.match(/.*csrftoken=([^;.]*).*$/) === null ? null : document.cookie.match(/.*csrftoken=([^;.]*).*$/)[1]
                },
                headAvatar: '/static/image/default.jpg',
                fileList: [],
                refer: localStorage.getItem('refer'),
                editorAid: localStorage.getItem('editorAid')
            },
            created() {
                if (this.editorAid === null || this.editorAid === undefined) {
                    document.location.href = this.refer;
                } else {
                    // 获取文章
                    this.getArticleDetail();
                }
            },
            mounted() {
                // 动态禁用元素呗
                this.auth();
                this.change_sign_status();
            },
            watch: {
            },
            methods: {
                handleClose(tag) {
                    this.tagOptions.splice(this.tagOptions.indexOf(tag), 1);
                },
                showInput() {
                    this.inputVisible = true;
                    this.$nextTick(_ => {
                        this.$refs.saveTagInput.$refs.input.focus();
                    });
                },
                handleInputConfirm() {
                    let inputValue = this.inputValue;
                    if (inputValue) {
                        let regexp = /^[a-zA-Z0-9\u4e00-\u9fa5]{2,15}$/;
                        if (!regexp.test(inputValue)) {
                            this.$message({
                                message: "标签内容长度2-15 不允许空格和特殊字符",
                                type: 'error'
                            });
                        }
                        else if (this.tagOptions.indexOf(inputValue) === -1) {
                            this.tagOptions.push(inputValue);
                        } else {
                            this.$message({
                                message: "该标签已存在 请勿重复添加",
                                type: 'error'
                            });
                        }

                    }
                    this.inputVisible = false;
                    this.inputValue = '';
                },
                getArticleDetail() {
                    const url = `/apiArticle/myArticles/?pk=${this.editorAid}`;
                    let regexp = /.*csrftoken=([^;.]*).*$/;
                    let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1];
                    let regexp_token = /.*jwtToken=([^;.]*).*$/;
                    let token = document.cookie.match(regexp_token) === null ? null : document.cookie.match(regexp_token)[1];
                    fetch(url, {
                        method: 'GET',
                        headers: {
                            'token': token,
                            'X-CSRFToken': xCSRF
                        }
                    })
                        .then(resp => resp.json())
                        .then(json => {
                            if (json.code !== 200) {
                                this.$message({
                                    message: json.message,
                                    type: 'warning'
                                })
                            } else {
                                this.$message({
                                    message: json.message,
                                    type: 'success'
                                });
                                this.article_title = json.data.results[0]["title"];
                                this.old_content = json.data.results[0]['text'];
                                this.headAvatar = json.data.results[0]['head_avatar'];
                                this.form.type = json.data.results[0]['tags'];
                                this.init_editor();
                            }
                        })
                },
                change_sign_status() {
                    this.nick_name = localStorage.getItem("nick_name") === null ? '_' : localStorage.getItem("nick_name");
                    let self = this;
                    setTimeout(function () {
                        self.loading = false;
                    }, 300)
                },
                logout() {
                    localStorage.removeItem('token');
                    localStorage.removeItem('nick_name');
                    window.clearCookie("jwtToken");
                    this.change_sign_status();
                    document.location.href = '/pages/homePage.html'
                },
                init_editor() {
                    const E = window.wangEditor;
                    const { $, BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E
                    // 自定义菜单样例
                    // 第一，菜单 class ，Button 菜单继承 BtnMenu class
                    class AlertMenu extends BtnMenu {
                        constructor(editor) {
                            // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
                            const $elem = E.$(
                                `<div class="w-e-menu" data-title="统计字数">
                                <button style="border: none; height: inherit; background-color: inherit; color: darkgray; font-size: 15px; margin-left: 5px;">count</button>
                            </div>`
                            )
                            super($elem, editor)
                        }

                        // 菜单点击事件
                        clickHandler() {
                            // 做任何你想做的事情
                            // 可参考【常用 API】文档，来操作编辑器
                            Vue.prototype.$message({
                                message: `总字数: ${editor.txt.text().length}`,
                                type: 'success'
                            });
                        }

                        // 菜单是否被激活（如果不需要，这个函数可以空着）
                        // 1. 激活是什么？光标放在一段加粗、下划线的文本时，菜单栏里的 B 和 U 被激活，如下图
                        // 2. 什么时候执行这个函数？每次编辑器区域的选区变化（如鼠标操作、键盘操作等），都会触发各个菜单的 tryChangeActive 函数，重新计算菜单的激活状态
                        tryChangeActive() {
                            // 激活菜单
                            // 1. 菜单 DOM 节点会增加一个 .w-e-active 的 css class
                            // 2. this.this.isActive === true
                            this.active()

                            // // 取消激活菜单
                            // // 1. 菜单 DOM 节点会删掉 .w-e-active
                            // // 2. this.this.isActive === false
                            // this.unActive()
                        }
                    }
                    // 注册菜单
                    const menuKey = 'alertMenuKey'
                    E.registerMenu(menuKey, AlertMenu)
                    const editor = new E("#toolbar-container", "#text-container");
                    editor.config.height = 500;
                    editor.config.placeholder = '分享现在的想法';
                    // 配置默认的alert
                    editor.config.customAlert = function (s, t) {
                        switch (t) {
                            case 'success':
                                Vue.prototype.$message({
                                    message: s,
                                    type: 'success'
                                });
                                break
                            case 'info':
                                Vue.prototype.$message({
                                    message: s,
                                    type: 'warning'
                                });
                                break
                            case 'warning':
                                Vue.prototype.$message({
                                    message: s,
                                    type: 'warning'
                                });
                                break
                            case 'error':
                                Vue.prototype.$message({
                                    message: s,
                                    type: 'error'
                                });
                                break
                            default:
                                Vue.prototype.$message({
                                    message: s,
                                    type: 'success'
                                });
                                break
                        }
                    };
                    // 默认情况下，只有 IE 和 旧版 Edge 会使用兼容模式，如果需要在其它浏览器上也使用兼容模式，可以在函数内进行判定
                    editor.config.compatibleMode = function () {
                        // 返回 true 表示使用兼容模式；返回 false 使用标准模式
                        return true
                    }
                    // 当我们使用兼容模式的时候，可以自定义记录的频率，默认 200 ms
                    editor.config.onchangeTimeout = 3000 // 修改为3s
                    // 配置 onchange 回调函数
                    editor.config.onchange = function (newHtml) {
                        let now_ = editor.txt.getJSON()
                        if (this.old_code !== now_) {
                            this.old_code = now_
                            localStorage.setItem('wangeditor', JSON.stringify(now_))
                            Vue.prototype.$message({
                                message: "自动保存成功",
                                type: 'success'
                            });
                        }

                    };
                    // 还可以修改历史记录的步数。默认 30 步
                    editor.config.historyMaxSize = 50 // 修改为 50 步
                    // 配置菜单栏，设置不需要的菜单
                    editor.config.excludeMenus = [
                        'video'
                    ];
                    // 设置index
                    editor.config.zIndex = 0;
                    // 挂载highlight插件 代码高亮
                    editor.highlight = hljs
                    // 配置tab长度
                    editor.config.languageTab = '    '
                    // 获取所有标题
                    let self = this;
                    editor.config.onCatalogChange = function (headList) {
                        /*
                            headList 格式
                            [
                                {
                                    id: "eold9", // 标题 id
                                    tag: "H1",
                                    text: "标题文字"
                                },
                                { ... },
                                { ... }
                            ]
                        */

                        // console.log("onCatalogChange arr", headList);
                        // let levelObj = {
                        //     "H1": "一级目录 ",
                        //     "H2": "二级目录 ",
                        //     "H3": "三级目录 ",
                        //     "H4": "四级目录 ",
                        //     "H5": "五级目录 ",
                        // };
                        // self.titleList = [];
                        // headList.forEach((item, index) => {
                        //     // item 里有 tag:H1,H2,H3,H4,H5, text:标签内文本, id:唯一id
                        //     // 新建titleList元素
                        //     console.log(item.tag);
                        //     self.titleList.push({
                        //         title: levelObj[item.tag] + item.text,
                        //         id: item.id
                        //     });

                        // });
                    };
                    // 自定义检查插入的链接
                    editor.config.linkCheck = function (text, link) {
                        // 以下情况，请三选一 返回 true验证成功 返回字符串验证失败 提示信息 返回undefined说明检查未通过，编辑器会阻止链接插入。
                        let text_rule = /^[\u4e00-\u9fa5a-zA-Z0-9.]{2,100}$/;
                        let text_ = text.match(text_rule) === null ? null : text.match(text_rule)[0]
                        let link_rule = /^(https?:\/\/[^\s]{2,100})$/;
                        let link_ = link.match(link_rule) === null ? null : link.match(link_rule)[0]
                        if (text_ === null) {
                            return '链接名格式错误 只能有数字、字母、下划线、汉字及少量特殊字符哦'
                        } else if (link_ === null) {
                            return '请输入正确且完整的链接'
                        } else {
                            return true
                        }
                    };
                    // 后面两个参数是可选参数
                    editor.config.linkImgCheck = function (imgSrc, alt, href) {
                        // 以下情况，请三选一 返回 true验证成功 返回字符串验证失败 提示信息 返回undefined说明检查未通过，编辑器会阻止链接插入。
                        let link_rule = /^(https?:\/\/[^\s]{2,100})$/;
                        let link_ = imgSrc.match(link_rule) === null ? null : imgSrc.match(link_rule)[0]
                        if (link_ === null) {
                            return '请输入正确且完整的链接'
                        } else {
                            return true
                        }
                    }
                    // 粘贴过滤 忽略图片
                    editor.config.pasteIgnoreImg = true
                    // 配置粘贴文本的内容处理
                    editor.config.pasteTextHandle = function (content) {
                        // 对粘贴的文本进行处理，然后返回处理后的结果
                        if (content == '' && !content) return ''
                        var str = content
                        str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '')
                        str = str.replace(/<style>[\s\S]*?<\/style>/ig, '')
                        str = str.replace(/<\/?[^>]*>/g, '')
                        str = str.replace(/[ | ]*\n/g, '<p>')
                        str = str.replace(/&nbsp;/ig, '')
                        // console.log('****', content)
                        // console.log('****', str)
                        return str
                    };
                    // 配置 server 接口地址
                    editor.config.uploadImgServer = '/apiArticle/fileImage/'
                    // 设置上传名
                    editor.config.uploadFileName = 'upload';
                    // 设置图片大小限制
                    editor.config.uploadImgMaxSize = 5 * 1024 * 1024 // 5M
                    // 设置一次上传多少张
                    editor.config.uploadImgMaxLength = 1
                    // 设置上传的headers
                    let regexp = /.*csrftoken=([^;.]*).*$/;
                    let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1];
                    let regexp_token = /.*jwtToken=([^;.]*).*$/;
                    let token = document.cookie.match(regexp_token) === null ? null : document.cookie.match(regexp_token)[1];
                    editor.config.uploadImgHeaders = {
                        'token': token,
                        'X-CSRFToken': xCSRF
                    };
                    // 设置图片超时时间 单位ms 默认10s
                    editor.config.uploadImgTimeout = 1000 * 60
                    // 设置图片类型限制
                    editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
                    // 上传回调
                    editor.config.uploadImgHooks = {
                        // 上传图片之前
                        before: function (xhr) {
                            //console.log(xhr)
                            // 可阻止图片上传
                            //return {
                            //    prevent: true,
                            //    msg: '需要提示给用户的错误信息'
                            //}
                        },
                        // 图片上传并返回了结果，图片插入已成功
                        success: function (xhr) {
                        },
                        // 图片上传并返回了结果，但图片插入时出错了
                        fail: function (xhr, editor, resData) {
                        },
                        // 上传图片出错，一般为 http 请求的错误
                        error: function (xhr, editor, resData) {
                        },
                        // 上传图片超时
                        timeout: function (xhr) {
                        },
                        // 图片上传并返回了结果，想要自己把图片插入到编辑器中
                        // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
                        customInsert: function (insertImgFn, result) {
                            // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
                            insertImgFn(result.data["url"])
                        }
                    };
                    editor.create();
                    // 获取缓存内容
                    let html_ = this.old_content;
                    // console.log(html_);
                    if (html_ !== null) {
                        editor.txt.setJSON(JSON.parse(html_)) // 重新设置编辑器内容
                    } else {
                        editor.txt.html('<p>分享你的想法</p>') // 重新设置编辑器内容
                    }
                    let self_ = this;
                    setTimeout(function () {
                        self_.loading = false;
                    }, 200)
                    window.editor = editor;
                },
                handleRemove(file, fileList) {
                    console.log(file, fileList);
                },
                handlePreview(file) {
                    console.log(file);
                },
                handleExceed(files, fileList) {
                    this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
                },
                beforeRemove(file, fileList) {
                    return this.$confirm(`确定移除 ${file.name}？`);
                },
                loadJsonFromFile(file, fileList) {
                    this.fileList = fileList
                },
                submitUpload() {
                    const file = this.fileList[0];
                    if (file === undefined || file === null) {
                        this.$notify.warning({
                            title: '警告',
                            message: '请先选择图片'
                        })
                        return
                    }
                    const size = file.size / 1024 / 1024
                    if (size > 5) {
                        this.$notify.warning({
                            title: '警告',
                            message: '大小必须小于5M'
                        })
                        return
                    }
                    this.$refs.upload.submit();
                },
                avatarFail(err, file, fileList) {
                    this.$message({
                        message: JSON.parse(err.message)["message"],
                        type: 'error'
                    });
                    this.fileList = [];
                },
                avatarSuccess(response, file, fileList) {
                    if (response.code !== 200) {
                        this.$confirm(`${response.message}`, '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            localStorage.setItem('refer', document.location.href);
                            document.location.href = '/pages/sign-in.html/';
                        }).catch(() => {
                            this.goBack();
                        });
                        this.fileList = [];
                        return
                    }
                    this.$message({
                        message: response.message,
                        type: 'success'
                    });
                    this.headAvatar = response.data.url;
                    this.fileList = [];
                },
                changeEditor() {
                    document.location.href = '/pages/editorByEditorMD.html'
                },
                auth() {
                    const url = `/apiUser/user/auth/`;
                    let regexp = /.*csrftoken=([^;.]*).*$/;
                    let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1];
                    let regexp_token = /.*jwtToken=([^;.]*).*$/;
                    let token = document.cookie.match(regexp_token) === null ? null : document.cookie.match(regexp_token)[1];
                    fetch(url, {
                        method: 'GET',
                        headers: {
                            'token': token,
                            'X-CSRFToken': xCSRF
                        }
                    })
                        .then(resp => resp.json())
                        .then(json => {
                            if (json.code !== 200) {
                                this.$confirm(`${json.message}`, '提示', {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                    type: 'warning'
                                }).then(() => {
                                    localStorage.setItem('refer', document.location.href);
                                    document.location.href = '/pages/sign-in.html/';
                                }).catch(() => {
                                    this.goBack();
                                });
                            } else {
                                this.page_title = `${json.data.user} 的新发布`;
                            }
                        })
                },
                // 文章上传
                update_content() {
                    // 获取文本
                    this.loading = true;
                    if (this.form.type.length < 1) {
                        this.$message({
                            message: `请至少选择一个标签`,
                            type: 'error'
                        });
                        this.loading = false;
                        return
                    }
                    const tags = this.form.type.join("|");
                    const title = this.article_title;
                    const content_text = window.editor.txt.text();  // 单纯获取文本
                    const content = JSON.stringify(window.editor.txt.getJSON());  // 单纯获取Json
                    if (content.length < 100 || content_text.length < 50 || title.length < 10) {
                        this.$message({
                            message: `标题或内容太少了 再多写点吧`,
                            type: 'error'
                        });
                        this.loading = false;
                        return
                    }
                    const url = `/apiArticle/myArticles/`;
                    let regexp = /.*csrftoken=([^;.]*).*$/;
                    let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1];
                    let regexp_token = /.*jwtToken=([^;.]*).*$/;
                    let token = document.cookie.match(regexp_token) === null ? null : document.cookie.match(regexp_token)[1];
                    fetch(url, {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                            'token': token,
                            'X-CSRFToken': xCSRF
                        },
                        body: `title=${encodeURIComponent(title)}&text=${encodeURIComponent(content)}&text_content=${encodeURIComponent(content_text)}&avatar=${this.headAvatar}&aid=${this.editorAid}&tags=${tags}`,
                    })
                        .then(resp => resp.json())
                        .then(json => {
                            if (json.code !== 200) {
                                this.loading = false;
                                this.$confirm(`${json.message}`, '提示', {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                    type: 'warning'
                                }).then(() => {
                                    localStorage.setItem('refer', document.location.href);
                                    document.location.href = this.refer || '/pages/homePage.html/';
                                }).catch(() => {
                                    this.goBack();
                                });
                            } else {
                                this.$message({
                                    message: json.message,
                                    type: 'success'
                                });
                                let self = this;
                                setTimeout(function () {
                                    document.location.href = self.refer || '/pages/homePage.html';
                                }, 2000)
                            }
                        })
                },
            }
        })
    </script>
    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
    <script src="/static/assets/js/material-dashboard.min.js?v=3.0.0"></script>
    <script src="https://myhkw.cn/api/player/1636018876119" id="myhk" key="1636018876119" m="1"></script>
</body>

</html>